<!--
 * @description 卡片轮播 1：1图文组件2
 * @author gaohailan
 * @date 2022/11/28
 -->
<template>
  <div
    class="card-swiper-text-img-two-page"
    :style="{'margin-top': top,'padding-left': spacing,'padding-right': spacing }"
  >
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title=" isShowModuleName ? moduleName : ''"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="toDetail(item)"
      >
        <section class="item-left">
          <van-image
            :src="setImgPath(item.courseImg, item.courseImgUrl)"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img
                src="../../images/base/error-icon.png"
                alt
              >
            </template>
          </van-image>
        </section>
        <section class="item-right">
          <section class="right-title etc3">{{
            isInitData ? getMapping(item, 'courseName') : item.courseName
          }}
          </section>
          <section class="right-txt etc3">
            {{ isInitData ? getMapping(item, 'courseIntroduce') : item.courseIntroduce }}
          </section>
        </section>
        <section class="item-play">
          <section class="play" />
        </section>
      </li>
    </ul>
  </div>
</template>

<script>
import mixins from '../mixins'
import { v4 as uuidv4 } from 'uuid'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'CardSwiperTextImgTwo',
  components: {
    CellTitle
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [
        {
          courseName: '标题1',
          courseIntroduce: '简介简介简介简介简介',
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        },
        {
          courseName: '标题2',
          courseIntroduce: '简介简介简介简介简介',
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        },
        {
          courseName: '标题3',
          courseIntroduce: '简介简介简介简介简介',
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        },
        {
          courseName: '标题4',
          courseIntroduce: '简介简介简介简介简介',
          carouselImg: '',
          carouselImgUrl: '',
          id: uuidv4(),
          title: '标题'
        }
      ],
      pageSize: '',
      souMold: '',
      classLabel: '',
    }
  },
  mounted() {
    this.pageSize = this.option.pageSize || 4
    this.souMold = this.option.souMold
    this.classLabel = this.option.classLabel
    if (this.isInitData) {
      this.initData()
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList?.data?.rows || []
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/utility/rem.scss';

.card-swiper-text-img-two-page {
  padding-bottom: rem(20);

  ul {
    border-radius: rem(16);
    background-color: #ffffff;

    li {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: rem(24);
      position: relative;

      .item-left {
        flex-shrink: 0;
        width: rem(160);
        height: rem(160);
        border-radius: rem(16);
        margin-right: rem(20);
        overflow: hidden;

        .van-image {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: rem(16);
          background: #c9c9c9;
          overflow: hidden;

          .van-image__error {
            > img {
              width: rem(80);
              height: rem(80);
            }

          }
        }
      }

      .item-right {
        flex: 1;
        height: rem(160);
        align-items: flex-start;
        //border-bottom: rem(2) solid #efefef;
        .right-title {
          font-size: rem(30);
          font-weight: bold;
          text-align: left;
          color: #333333;
          line-height: 1.5;
        }

        .right-txt {
          margin-top: rem(30);
          font-size: rem(22);
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          text-align: left;
          color: #999999;
          line-height: 1.2;
        }
      }

      .item-play {
        height: 100%;
        width: rem(80);
        display: flex;
        align-items: center;
        justify-content: center;

        .play {
          width: rem(44);
          height: rem(44);
          @include bg-image('./', '/play.png')
        }
      }

      &:after {
        left: rem(204);
        right: rem(24);
        width: auto;
        height: 1px;
        position: absolute;
        z-index: 0;
        bottom: 0;
        content: '';
        background-image: -webkit-linear-gradient(
                bottom,
                #ececec 50%,
                transparent 0
        );
        background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
      }

      &:last-child:after {
        display: none;
      }
    }
  }
}
</style>
